<template>
	<view class="detail" v-if="Detail">
		<view class="top-main">
			<view class="show-img">
				<u-swiper :list="Detail.images" height="573"></u-swiper>
			</view>
			<view class="price">
				<view class="price-left">
					<text class="left1">￥{{ Detail.price || ''}}起</text>
					<text class="left2">￥{{ Detail.line_price || '' }}</text>
				</view>
				<view class="price-right">
					<text class="right1">{{ Detail.people || '' }}人已买</text>
				</view>
			</view>

			<view class="title">
				{{ Detail.title || ''}}
			</view>
			<view class="little-title">
				{{ Detail.description || ''}}
			</view>

			<view class="promise">
				<view class="service">
					<image class="img" src="/static/image/baozhang.png" />
					<view class="inner">服务保障</view>
				</view>
				<view :class="['pro',{'protwo':i == 1,'prother':i == 2}]" v-for="(item,i) in Detail.tags" :key="i">
					<view class="pricon"></view>
					<view class="inner">{{item}}</view>
				</view>
			</view>

			<view class="title">
				推荐套餐
			</view>
			<view class="recommand">
				<swiper class="swiper-box ">
					<swiper-item v-for="item in Package" :key="item.id" class="swiper-item-box"
						@click="dorecoitem(item)">
						<view class="one">
							<view class="top">
								{{ item.title }}
							</view>
							<view class="bottom">
								<text class="price1">￥{{item.price}}</text>
								<text class="price2">¥{{item.line_price}}</text>
							</view>
							<image class="ref-img" :src="item.image" mode="aspectFill" />
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>

		<view class="btom-main">
			<view class="navbar">
				<view :class="{active:actess == true}" @click="navOne">用户评价</view>
				<view :class="{active:actess == false}" @click="navTwo">服务内容</view>
			</view>

			<!--  用户评价 -->
			<view class="one-box" v-if="actess">
				<view class="command-title">
					<view class="left">
						<view class="left1"></view>
						<view class="left2">用户评论</view>
					</view>
					<view class="right" @click="ToRevaluate">
						<view class="right1">全部
							<u-icon name="arrow-right" />
						</view>
					</view>
				</view>

				<view class="tags">
					<view :class="['tag',{first:firindex == index}]" v-for="(item,index) in CommentList.tags"
						:key="index" @click="dofirst(index,item)">
						<text class="txt">{{item.name}}</text>
						<text>{{item.value}}</text>
					</view>
				</view>

				<view class="commander" v-for="item in CommentList.list.data" :key="item.id">
					<view class="title1">
						<view class="left">
							<image class="img" :src="item.avatar" />
							<view class="name">{{ item.username }}</view>
						</view>
						<view class="right">
							<u-rate :count="count" v-model="item.grade" :disabled="true" active-color="#F7BD2B"
								inactive-color="#F7F7F7"></u-rate>
						</view>
					</view>
					<view class="text"> {{item.content}}</view>
					<view class="pics" v-if="item.images[0]">
						<block v-for="(items,index) in item.images" :key="index">
							<image class="pic" :src="items" mode="aspectFill" />
						</block>
					</view>
				</view>

				<view class="command-title">
					<view class="left">
						<view class="left1"></view>
						<view class="left2">详情</view>
					</view>
				</view>

				<view class="detail-image">
					<u-parse :html="Detail.blurb_content" tag-style="bj_conten_style"></u-parse>
				</view>
			</view>

			<!-- 服务内容 -->
			<view class="two-box" v-else>
				<u-parse :html="Detail.blurb_content" tag-style="bj_conten_style"></u-parse>

			</view>

		</view>

		<!-- 底部 -->
		<view class="fixed">
			<view class="kefu-box">
				<image class="img" src="/static/image/kefu.png" />
				<text class="txt">客服</text>
				<button open-type="contact" class="opbtn"></button>
			</view>

			<button class="buy" @click="dopurch">立即购买</button>
		</view>

		<!-- 购买弹窗 -->
		<u-popup v-model="Purchshow" mode="bottom" border-radius="20" closeable="true"
			:customStyle="{margin: '0 30rpx'}" @close="doclose">
			<view class="purchase">
				<view class="pur-title">请选择购买方式</view>

				<!-- 时间 -->
				<view class="pur-time">
					<view class="time-title">服务时间</view>
					<view class="time-box">
						<view :class="['time-item', index === activeone ? 'activeone' : '']"
							v-for="(item,index) in means" :key="index" @click="clickservice(index)">
							{{item.name}}
						</view>
					</view>
					<view class="descr">{{sub_title}}适合房屋面积&lt;{{sub_area}}平米使用</view>
				</view>
				<!-- 规格 -->
				<view class="pur-spec">
					<view class="spec-title">购买规格</view>
					<view :class="['spec-item',index === activetwo ? 'activetwo' : '']"
						v-for="(item,index) in meanslist" :key="index" @click="clickmeanslist(index)">

						<view class="spec-item-title">{{item.itemname}}<text class="tag"
								v-if="item.child.desc">{{item.child.desc}}</text>
						</view>
						<view class="spec-item-rig">
							<view class="spec-item-price">
								<text class="linprice">￥{{item.child.line_price}}</text>
								￥<text class="itprice">{{item.child.price}}</text>
							</view>
							<view class="minus">已减 ￥{{item.child.line_price - item.child.price}}</view>
						</view>
					</view>
				</view>
				<!-- 按钮 -->
				<button class="btn" @click="ToConfirm">确定</button>
			</view>
		</u-popup>
	</view>

</template>

<script>
	import { mapState } from 'vuex'
	import { ResDetail, ResPackage, ResCommentList } from '@/untils/api.js'
	export default {
		computed: {
			...mapState(['userInfo'])
		},
		data() {
			return {
				firindex: 0,
				count: 5,
				activeone: 0,
				activetwo: 0,
				actess: true,
				Purchshow: false,
				currentIndex: 0,
				Detail: {}, // 服务详情
				Package: [],
				sub_title: '',
				sub_area: '',
				CommentList: [],
				meanslist: [],
				means: [],
				newspce: '', // 规格名称
				newservice: '',
				newprice: '',
				CommentObj: {
					id: '',
					limit: 5
				},
				onetitle: ''
			}
		},
		onLoad(option) {
			this.CommentObj.id = option.id
			this.getDetail(option)
			this.getPackage(option)
			this.getCommentList()
			uni.setNavigationBarTitle({
				title: option.title
			})
		},
		methods: {
			dorecoitem(item) {
				let idObj = {
					id: item.id
				}
				this.getDetail(idObj)
				this.getPackage(idObj)
				this.getCommentList(idObj)
				uni.setNavigationBarTitle({
					title: item.title
				})

			},
			dofirst(index, item) {
				console.log(item);
				this.firindex = index
				this.CommentObj.type = item.name
				if (index == 0) {
					this.CommentObj.type = ''
				}

				this.getCommentList()
			},
			ToRevaluate() {
				uni.navigateTo({
					url: `/pages/Evaluate/Revaluate?id=${this.Detail.id}`
				})
			},
			navOne() {
				this.actess = true
			},
			navTwo() {
				this.actess = false
			},
			ToConfirm() {
				let order = {
					title: this.Detail.title,
					price: this.newprice,
					images: this.Detail.images,
					newspce: this.newspce,
					newservice: this.newservice,
					id: this.Detail.id
				}
				uni.navigateTo({
					url: `/pages/Home/Confirm?order=${encodeURIComponent(JSON.stringify(order))}`
				})
				this.Purchshow = false

			},
			// 弹层关闭事件
			doclose() {
				this.activeone = 0
				this.activetwo = 0
			},
			dopurch() {
				// 判断是否登录
				if (this.userInfo != '{}') {
					this.Purchshow = true
					this._cdataInfo()
				} else {
					uni.$showMsg('请先登录!')
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/Login/Login'
						})
					}, 1000)
				}
				// 初次默认拿到第一项的时间、规格、价格
				this.newservice = this.means[0].name
				this.newspce = this.meanslist[0].itemname
				this.newprice = this.meanslist[0].child.price
			},
			clickmeanslist(index) {
				this.activetwo = index
				// 获取规格名称、价格
				this.newspce = this.meanslist[index].itemname
				this.newprice = this.meanslist[index].child.price
			},
			clickservice(index) {
				this.activeone = index
				this.activetwo = 0
				this._cdataInfo(index)
				// 点击时间，每次刷新，默认拿到第一项的值
				this.newservice = this.means[index].name
				this.newspce = this.meanslist[0].itemname
				this.newprice = this.meanslist[0].child.price
			},
			_cdataInfo(index = 0) {
				let _info = this.means[index]
				this.sub_title = _info.name
				this.sub_area = _info.area
				this.meanslist = _info.child
			},
			changeIndex(e) {
				const index = e.target.dataset.index;
			},
			async getDetail(id) {
				const { data: res } = await ResDetail(id)
				this.Detail = res.data
				this.means = res.data.items
				console.log(res, '服务详情');
			},
			async getPackage(id) {
				const { data: res } = await ResPackage(id)
				this.Package = res.data
				console.log(res, '推荐套餐');
			},
			async getCommentList() {
				const { data: res } = await ResCommentList(this.CommentObj)
				this.CommentList = res.data
				console.log(res, '用户评论');
			}

		}
	}
</script>

<style lang="scss" scoped>
	.detail {
		overflow-x: hidden;
		background: linear-gradient(to bottom, #fff, #d5d4d4);
	}

	.detail .show-img {
		width: 750rpx;
		height: 573rpx;
	}




	.detail .price {
		width: 100%;
		padding: 0 32rpx;
		margin: 15rpx 0;
		box-sizing: border-box;
		height: 53rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.detail .price .price-left .left1 {
		width: 133rpx;
		height: 53rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #EB584E;
		line-height: 45rpx;
	}

	.detail .price .price-left .left2 {
		width: 65rpx;
		height: 37rpx;
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #9D9D9D;
		line-height: 37rpx;
		text-decoration: line-through;
		margin-left: 10rpx;
	}

	.detail .price .price-right .right1 {
		width: 138rpx;
		height: 28rpx;
		font-size: 20rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #9D9D9D;
		line-height: 28rpx;
	}

	.detail .title {
		margin-left: 24rpx;
		height: 50rpx;
		font-size: 36rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #313131;
		line-height: 50rpx;
	}

	.detail .little-title {
		margin-left: 24rpx;
		margin-top: 8rpx;
		height: 37rpx;
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #9B9B9B;
		line-height: 37rpx;
	}

	.detail .promise {
		width: 698rpx;
		height: 67rpx;
		background: #FFF7F3;
		border-radius: 13rpx;
		border: 2rpx solid #ECE3D2;
		margin: 29rpx auto;
	}

	.detail .promise {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.detail .promise .service {
		width: 104rpx;
		height: 30rpx;
		position: relative;
	}

	.detail .promise .service .img {
		position: absolute;
		top: 0;
		left: 0;
		width: 124rpx;
		height: 30rpx;
	}

	.detail .promise .service .inner {
		width: 100%;
		position: absolute;
		top: 1rpx;
		left: 24rpx;
		height: 30rpx;
		font-size: 20rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFEF;
		line-height: 30rpx;
		text-align: center;
	}



	.pro {
		display: flex;

		.pricon {
			width: 24rpx;
			height: 24rpx;
			background: url('~@/static/image/bz01.png') no-repeat;
			background-size: 24rpx;
			margin: 5rpx 10rpx 0 0;
		}

		.inner {
			height: 30rpx;
			font-size: 22rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #6F5345;
			line-height: 30rpx;
		}

	}

	.protwo {
		.pricon {
			background: url('~@/static/image/bz02.png') no-repeat;
			background-size: 24rpx;
		}
	}

	.prother {
		.pricon {
			background: url('~@/static/image/bz03.png') no-repeat;
			background-size: 24rpx;
		}
	}



	.recommand {
		padding: 24rpx 24rpx 0;
		box-sizing: border-box;

		.swiper-box {
			height: 162rpx;

			.swiper-item-box {
				width: 355rpx !important;
				height: 162rpx !important;
			}

		}

	}

	.recommand .one {
		width: 341rpx;
		height: 162rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 5rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 4rpx;
		position: relative;
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
	}

	.recommand .one .top {
		width: 313rpx;
		height: 64rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #090C15;
		line-height: 32rpx;
		margin-left: 10rpx;
		border-radius: 4rpx;
	}

	.recommand .one .bottom .price1 {
		width: 341rpx;
		height: 50rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #F9503F;
		margin-right: 10rpx;
	}

	.recommand .one .bottom .price2 {
		height: 28rpx;
		font-size: 20rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #8A8A8F;
		line-height: 28rpx;
		text-decoration: line-through;
	}

	.recommand .one .ref-img {
		width: 73rpx;
		height: 68rpx;
		position: absolute;
		right: 39rpx;
		bottom: 17rpx;
	}

	.btom-main {
		padding: 0 20rpx;
		margin-top: 30rpx;
	}

	.navbar {
		background-color: #fff;
		display: flex;
		justify-content: space-around;
		padding: 24rpx;
		box-sizing: border-box;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #626262;

		.active {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			color: #03C3A8;
		}
	}

	.one-box {
		background-color: #fff;
	}



	.command-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 24rpx;
		width: 100%;
		height: 90rpx;
	}

	.command-title .left {
		display: flex;
		align-items: center;
	}

	.command-title .left .left1 {
		width: 6rpx;
		height: 21rpx;
		background: #00C7A7;
		border-radius: 3rpx;
		margin-right: 12rpx;
	}

	.command-title .left .left2 {
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #222222;
	}

	.command-title .right .right1 {
		height: 37rpx;
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #979797;
		line-height: 37rpx;
	}

	.tags {
		display: flex;
		justify-content: left;
		flex-wrap: wrap;
		align-items: center;
		box-sizing: border-box;
		padding: 24rpx 14rpx;
		width: 100%;
		height: 100%;
	}

	.tags .tag {
		box-sizing: border-box;
		padding: 5rpx 15rpx;
		border-radius: 9rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #2E2E30;
		background: #F5F5F8;
		margin: 5rpx;


		.txt {
			margin-right: 5rpx;
		}
	}

	.tags .first {
		background: #FEF0EF;

	}

	.commander {
		padding: 18rpx;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
	}

	.commander .title1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.commander .title1 .left {
		display: flex;
		align-items: center;
	}

	.commander .title1 .img {
		width: 60rpx;
		height: 60rpx;
		margin-right: 12rpx;
		border-radius: 50%;
	}

	.commander .title1 .name {
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 600;
		color: #3B3B3B;
	}

	.commander .right .star {
		width: 26rpx;
		height: 26rpx;
		margin-right: 5rpx;
	}

	.commander .text {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #3B3B3B;
		margin: 20rpx 0;
	}

	.commander .pics {
		display: flex;
		flex-wrap: wrap;
	}

	.commander .pics .pic {
		width: 222rpx;
		height: 222rpx;
		margin: 8rpx 5rpx 0 0;
		border-radius: 10rpx;

		&:nth-child(3n) {
			margin-right: 0;
		}
	}

	.detail-image {
		margin-bottom: 136rpx;
	}

	.two-box {
		background-color: #fff;
		padding-top: 20rpx;
		margin-bottom: 136rpx;
	}

	.bj_conten_style {
		img {
			max-width: 100%;
		}
	}


	/* 固定 */
	.fixed {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 143rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 8rpx 2rpx rgba(0, 0, 0, 0.09);
		display: flex;
		justify-content: space-between;
		padding: 28rpx;
		box-sizing: border-box;
	}

	.fixed .kefu-box {
		width: 50rpx;
		display: flex;
		flex-direction: column;
		position: relative;

		.img {
			width: 50rpx;
			height: 50rpx;
		}

		.txt {
			font-size: 24rpx;
		}

		.opbtn {
			width: 50rpx;
			height: 80rpx;
			position: absolute;
			left: 0;
			top: 0;
			background-color: #fff;
			opacity: 0.1;
			z-index: 1;
			;
		}

		button.opbtn::after {
			border: none;
		}

	}







	.fixed .buy {
		width: 599rpx;
		height: 88rpx;
		line-height: 88rpx;
		background: #01C3A8;
		border-radius: 8rpx;
		font-size: 30rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #F5FFFE;
	}

	// 购买弹窗
	.purchase {
		padding: 30rpx;
		background-color: #fff;


		.pur-title {
			font-size: 34rpx;
			font-weight: 700;
		}

		.pur-time {
			.time-title {
				font-size: 30rpx;
				font-weight: 600;
				margin: 38rpx 0 24rpx;
			}

			.time-box {
				display: flex;

				.activeone {
					background-color: #F0FFFC;
					border: 1px solid #8BA4A1;
				}

				.time-item {
					width: 108rpx;
					height: 60rpx;
					text-align: center;
					line-height: 60rpx;
					background-color: #FAFAFA;
					border-radius: 10rpx;
					margin-right: 20rpx;
				}

			}

			.descr {
				margin: 23rpx 0 38rpx;
				color: #898A8F;
				font-size: 24rpx;
			}
		}

		//規格
		.pur-spec {
			.spec-title {
				font-size: 30rpx;
				font-weight: 600;
				margin-bottom: 26rpx;
			}

			.activetwo {
				background-color: #F0FFFC;
				border: 1px solid #8BA4A1;
			}

			.spec-item {
				width: 639rpx;
				height: 131rpx;
				padding: 25rpx 30rpx;
				margin-bottom: 20rpx;
				display: flex;
				justify-content: space-between;
				background-color: #FAFAFA;
				border-radius: 10rpx;
				box-sizing: border-box;



				.spec-item-title {
					margin-top: 5rpx;

					.tag {
						width: 145rpx;
						height: 33rpx;
						text-align: center;
						line-height: 33rpx;
						margin-left: 5rpx;
						display: inline-block;
						background-color: #FB562F;
						color: #fff;
						font-size: 20rpx;
						border-radius: 30rpx;
						border-bottom-left-radius: 0;

					}
				}

				.spec-item-rig {
					.spec-item-price {
						color: #FC5729;


						.linprice {
							color: #8B8B93;
							margin-right: 10rpx;
							text-decoration: line-through;
						}

						.itprice {
							font-size: 34rpx;
						}
					}

					.minus {
						margin: 10rpx 0 0 28rpx;

					}
				}


			}


		}

		.btn {
			width: 638rpx;
			height: 88rpx;
			color: #fff;
			text-align: center;
			line-height: 88rpx;
			background-color: #01C3A8;
		}
	}
</style>
